<script setup>
import { ref } from "vue";
import { Edit, Delete, Search } from "@element-plus/icons-vue";
import axios from "@/util/axios";
import { ElMessage, ElMessageBox } from "element-plus";
// 引入详情页子组件
import Details from "./components/details.vue";
import imageDetails from "./components/imageDetails.vue";
import SwiperImageDetails from "./components/swiperImageDetails.vue";
import ProductImageDetails from "./components/productImageDetails.vue";

const queryForm = ref({
  query: "",
  pageNum: 1,
  pageSize: 10,
});

const total = ref(0);

const tableData = ref([]);

//定义是否显示详情页子组件，默认false
const detailsVisible = ref(false);
const detailsTitle = ref("");
const imageDetailsVisible = ref(false)
const imageDetailsValue = ref({})
const swiperImageDetailsVisible = ref(false)
const productImageDetailsVisible = ref(false)


//定义:id="id"传订单详情的id,默认为-1
const id = ref(-1);

//初始化商品列表
const initProductList = async () => {
  const res = await axios.post("admin/product/list", queryForm.value);
  tableData.value = res.data.productList;

  total.value = res.data.total;
};

initProductList();

// 实现页数,分页处理
const handleSizeChange = (pageSize) => {
  queryForm.value.pageNum = 1;
  queryForm.value.pageSize = pageSize;
  initProductList();
};
const handleCurrentChange = (pageNum) => {
  queryForm.value.pageNum = pageNum;
  initProductList();
};


//删除功能
const handlDelete = (id, status) => {
  ElMessageBox.confirm("是否确定删除订单？", "系统提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  })
    //执行成功
    .then(async () => {
      let res = await axios.get("/admin/product/delete/" + id);
      if (res.data.code == 0) {
        ElMessage({
          type: "success",
          message: "删除成功",
        });
        initProductList();
      } else {
        ElMessage({
          type: "error",
          message: res.data.msg,
        });
      }
    })
    //遇到异常执行
    .catch(() => {});
};

//动态标题
const handlDetailsValue = (productId) => {
  if (productId) {
    id.value = productId;
    detailsTitle.value = "商品修改";
  } else {
    id.value = -1;
    detailsTitle.value = "商品添加";
  }
  detailsVisible.value = true;
};

//是否热卖
const hotChangeHandle =async (row)=>{
    let res = await axios.get("/admin/product/updateHot/"+row.id+"/state/"+row.hot);
    if(res.data.code==0){
        ElMessage({
          type: "success",
          message: "执行成功",
        });
    }else {
        ElMessage({
          type: "error",
          message: res.data.msg,
        });
        initProductList();
    }
}


//是否首页幻灯片
const swiperChangeHandle =async (row)=>{
    let res = await axios.get("/admin/product/updateSwiper/"+row.id+"/state/"+row.swiper);
    if(res.data.code==0){
        ElMessage({
          type: "success",
          message: "执行成功",
        });
    }else {
        ElMessage({
          type: "error",
          message: res.data.msg,
        });
        initProductList();
    }
}


//图片更换,row是传一行的值过去
const handlImageDetailsValue=(row)=>{
  imageDetailsVisible.value = true
  imageDetailsValue.value = JSON.parse(JSON.stringify(row))
}

//首页幻灯设置（轮播图）
const handlSwiperImageDetailsValue=(row)=>{
  swiperImageDetailsVisible.value = true
  imageDetailsValue.value = JSON.parse(JSON.stringify(row))
}

//详情页轮播图
const handlProductImageDetailsValue=(row)=>{
  productImageDetailsVisible.value = true
  imageDetailsValue.value = JSON.parse(JSON.stringify(row))
}




</script>

<template>
  <!-- el-card悬浮框 -->
  <el-card>
    <el-row :gutter="20" class="header">
      <el-col :span="7">
        <el-input
          placeholder="请输入商品名称搜索"
          v-model="queryForm.query"
          clearable
        ></el-input>
      </el-col>
      <el-button type="button" :icon="Search" @click="initProductList"
        >搜索</el-button
      >
      <el-button type="success" @click="handlDetailsValue()"
        >添加商品</el-button
      >
    </el-row>
    <el-table :data="tableData" height="500" style="width: 100%">
      <el-table-column prop="id" label="#id" width="80" fixed/>
      <el-table-column prop="name" label="商品名称" width="150" fixed />
      <el-table-column prop="proPic" label="商品图片" width="200" align="center">
        <template v-slot="scope">
                <!-- /image/fiery是后端WebAppConfigurer里写的 -->
                <img :src="'http://localhost:8080/image/fiery/'+scope.row.proPic" width="100" height="100" />
            </template>
      </el-table-column>
      <el-table-column prop="price" label="价格（元）" width="100" />
      <el-table-column prop="stock" label="库存（件）" width="100" />
      <el-table-column prop="type" label="商品类别" width="100" >
        <template #default="scope">
          <div>{{ scope.row.type ? scope.row.type.name : "" }}</div>
        </template>
      </el-table-column>
      <el-table-column prop="hot" label="是否热卖" width="100" align="center" >
        <template v-slot="{row}">
               <el-switch v-model="row.hot" @change="hotChangeHandle(row)"></el-switch>
            </template>
      </el-table-column>
      <el-table-column prop="swiper" label="是否首页幻灯片" width="150" align="center" >
        <template v-slot="{row}">
               <el-switch v-model="row.swiper" @change="swiperChangeHandle(row)"></el-switch>
            </template>
      </el-table-column>
      <el-table-column prop="swiperPic" label="幻灯图片" width="200" align="center">
        <template v-slot="scope">
                <!-- /image/fiery是后端WebAppConfigurer里写的 -->
                <img :src="'http://localhost:8080/image/swiper/'+scope.row.swiperPic" width="150" height="80" />
            </template>
      </el-table-column>
      <el-table-column prop="swiperSort" label="幻灯排序" width="100" align="center" />
      <el-table-column prop="description" label="商品描述" width="350"/>
      <el-table-column prop="action" label="操作" width="450" fixed="right">
        <template v-slot="scope">
          <!-- 括号后面是传入什么数据 -->
          <el-button type="primary"  @click="handlImageDetailsValue(scope.row)">更换图片</el-button>
          <el-button type="success"  @click="handlSwiperImageDetailsValue(scope.row)">幻灯设置</el-button>
          <el-button type="warning"  @click="handlProductImageDetailsValue(scope.row)">轮播图设置</el-button>
          <el-button type="success" :icon="Edit"  @click="handlDetailsValue(scope.row.id)"></el-button>
          <el-button type="danger"  :icon="Delete"  @click="handlDelete(scope.row.id)"></el-button>

          

        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <el-pagination
      v-model:current-page="queryForm.pageNum"
      v-model:page-size="queryForm.pageSize"
      :page-sizes="[10, 20, 30, 40, 50]"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </el-card>

  <!-- 使用详情页子组件 -->
  <Details
    v-model="detailsVisible"
    :detailsVisible="detailsVisible"
    :id="id"
    :details-title="detailsTitle"
    @initProductList="initProductList"
  ></Details>

  <imageDetails v-model="imageDetailsVisible" @initProductList="initProductList" :imageDetailsValue="imageDetailsValue"></imageDetails>

  <SwiperImageDetails v-model="swiperImageDetailsVisible" @initProductList="initProductList" :imageDetailsValue="imageDetailsValue"></SwiperImageDetails>

  <ProductImageDetails v-model="productImageDetailsVisible" @initProductList="initProductList" :imageDetailsValue="imageDetailsValue"></ProductImageDetails>


</template>

<style scoped>
.header {
  padding-bottom: 16px;
  box-sizing: border-box;
}
.el-pagination {
  padding-top: 15px;
  box-sizing: border-box;
}
</style>


